<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="龙海智慧物业" leftIcon="home" bgColor="#0B868E">
			</u-navbar>
		</view>


		<view class="con-body wrap">
			<view style="height: 20rpx;"></view>
			<u-swiper border-radius="40" style="margin-top: 20rpx; margin-bottom: 20rpx;" @click="intoBanner"
				:list="bannerList">
			</u-swiper>
			<view style="background-color: #F8F8F8; border-radius: 15rpx;padding-bottom: 20rpx; margin-top: 20rpx;
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15);">
				<u-grid :border="false" @click="click" col="4">
					<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" @click="navInto(baseListIndex)"
							:name="baseListItem.image" :width="60" :height="60" style="border-radius: 20rpx;"
							:label="baseListItem.name" labelPos="bottom" labelColor="#363636" space="5" labelSize="16">
						</u-icon>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>

			<view style="margin: 10rpx;">
				<u-notice-bar icon="volume" :text="notice" speed="60rpx" color="#9e9e9e" bgColor="white" style="margin-top: 20rpx; border-radius: 10rpx; 
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15);">
				</u-notice-bar>
			</view>

			<!-- 龙庭管家 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="title">龙庭管家</view>
					<view class="user-list">
						<view class="user-list-cell">
							<view style="width: 100%; height: 300rpx; background-color: #EEEEEE; border-radius: 20rpx;">

							</view>


						</view>
					</view>
				</view>
			</view>

			<!-- 龙庭社圈 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="title">龙庭社圈<text
							style="color: #999999; font-weight: 400;font-size: 28rpx; float: right; padding-right: 20rpx;">更多</text>
					</view>
					<view class="user-list">
						<view class="user-list-cell">
							<view style="width: 100%; height: 240rpx;">
								<u-image :src="square" mode="widthFix" width="100%"></u-image>
							</view>


						</view>
					</view>
				</view>
			</view>

			<!-- 邻里共享 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="title">邻里共享<text
							style="color: #999999; font-weight: 400;font-size: 28rpx; float: right; padding-right: 20rpx;">更多</text>
					</view>
					<view class="user-list">
						<view class="user-list-cell">
							<view class="item">
								<view class="icon">
									<u-icon width="340rpx" height="300rpx" :name="near[0].image"></u-icon>
								</view>
							</view>
							<view class="item">
								<view class="icon">
									<u-icon width="340rpx" height="300rpx" :name="near[1].image"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 邻里商城 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="title">邻里商城<text
							style="color: #999999; font-weight: 400;font-size: 28rpx; float: right; padding-right: 20rpx;">更多</text>
					</view>
					<view class="user-list">
						<view class="user-list-cell">
							<view class="item">
								<view class="icon">
									<u-icon width="340rpx" height="300rpx" :name="shop[0].image"></u-icon>
								</view>
							</view>
							<view class="item">
								<view class="icon">
									<view>
										<u-icon width="340rpx" height="140rpx" :name="shop[1].image"></u-icon>
									</view>
									<view style="margin-top: 20rpx;">
										<u-icon width="340rpx" height="140rpx" :name="shop[2].image"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [
					'https://s4.ax1x.com/2022/02/17/H56eyj.png'
				],
				baseList: [{
						name: '访客通行',
						image: 'https://s4.ax1x.com/2022/02/22/HzVyZT.png'
					},
					{
						name: '生活缴费',
						image: 'https://s4.ax1x.com/2022/02/22/HzVaGj.png'
					},
					{
						name: '报事报修',
						image: 'https://s4.ax1x.com/2022/02/22/HzVBMq.png'
					},
					{
						name: '智慧停车',
						image: 'https://s4.ax1x.com/2022/02/22/HzVDs0.png'
					},
					{
						name: '龙庭管家',
						image: 'https://s4.ax1x.com/2022/02/22/HzVwzn.png'
					},
					{
						name: '无忧社区',
						image: 'https://s4.ax1x.com/2022/02/22/HzVrLV.png'
					},
					{
						name: '社区便民',
						image: 'https://s4.ax1x.com/2022/02/22/HzVtIg.png'
					},
					{
						name: '邻里商城',
						image: 'https://s4.ax1x.com/2022/02/22/HzVdRs.png'
					},
				],
				notice: "疫情防控通知疫情防控通知疫情防控通知",
				guanjia: "../../static/home/u1648.png",
				square: "https://s4.ax1x.com/2022/02/17/H5cp3F.jpg",
				near: [{
						image: 'https://s4.ax1x.com/2022/02/17/H56VSg.gif'
					},
					{
						image: 'https://s4.ax1x.com/2022/02/17/H56ZlQ.gif'
					}
				],
				shop: [{
						image: 'https://s4.ax1x.com/2022/02/17/H5c1HI.gif'
					},
					{
						image: 'https://s4.ax1x.com/2022/02/22/HxRxDH.png'
					},
					{
						image: 'https://s4.ax1x.com/2022/02/22/HxRzbd.png'
					}
				]
			}
		},
		methods: {
			navInto(index) {
				switch (index) {
					case 0:
						this.$u.route({
							url: '/pagesHome/visit/index',
							params: {

							}
						});
						break;
					case 1:
						this.$u.route({
							url: '/pagesHome/pay/index',
							params: {

							}
						});
						break;
					case 2:
						this.$u.route({
							url: '/pagesHome/repair/index',
							params: {

							}
						});
						break;
					case 3:
						this.$u.route({
							url: '/pagesMine/park/index',
							params: {

							}
						});
						break;
					default:
						console.log('暂不支持');
				}
			},
		}
	}
</script>

<style>
	.wrap {
		width: 96%;
		margin-left: 2%;
		margin-bottom: 44rpx;
	}



	.iconType {
		display: flex;
		background-color: #FFFFFF;
		justify-content: space-between;
	}

	.icon {
		height: auto;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #13227a;
		font-size: 28rpx;
	}
</style>
